<script lang="ts" setup>
import skeleton from './skeleton.vue'
import { getActivityDetailService, signUpActivityService } from '@/common/service/activity'
import type { ActivityDetail } from '@/common/types/activity'
import mpHtml from '@/common/components/mp-html/mp-html.vue'
import { IconPath, PageTitle } from '@/common/constants'

interface activityInfo {
  title: string
  subText: string
}

// const ActivityInfoList = ref([
//   {
//     title: '活动时间',
//     content: '2024-10-14 09:00:00-12:00:00',
//   },
//   {
//     title: '活动地点',
//     content: '广东省广州市花都区花东镇',
//   },
//   {
//     title: '报名截止时间',
//     content: '2024-10-14 09:00:00',
//   },
//   {
//     title: '联系人信息',
//     content: '练先生 1873489393',
//   },
//   {
//     title: '联系人信息',
//     content: '在常用的社交分享组件中，微信（微信好友和朋友圈）、微博、QQ（QQ好友和QQ空间）是三大主要平台，而其...',
//   },
// ])

const TitleFontSize = '32rpx'
const SubFontSize = '32rpx'

/**
 * 志愿者活动id
 */
const activityId = ref<number>(1)

/**
 * 志愿者活动详情
 */
const activityDetail = ref<ActivityDetail>()

/**
 * 活动信息列表
 */
const activityInfoList = ref<activityInfo[]>()

/**
 * 获取志愿者活动详情
 */
const getActivityDetail = async () => {
  const { data } = await getActivityDetailService(activityId.value)
  activityDetail.value = data

  activityInfoList.value = [
    {
      title: '活动时间',
      subText: `${data.startTime}-${data.endTime}`,
    },
    {
      title: '活动地点',
      subText: data.address,
    },
    {
      title: '报名截止时间',
      subText: data.endTime,
    },
    {
      title: '联系人信息',
      subText: `${data.contactNickname}  ${data.contactPhone}`,
    },
  ]
}

const activityStatus = ['招募中', '进行中', '已结束']

/**
 * 用户是否已报名
 */
const isSign = ref<boolean>(false)

/**
 * 志愿者活动报名
 */
const onSign = (activityId: number) => {
  if (!isSign.value) {
    signUpActivityService(activityId).then(() => {
      uni.showToast({
        title: '报名成功',
        icon: 'none',
      })
    }).catch(() => {
      uni.showToast({
        title: '报名失败',
        icon: 'none',
      })
    })
  }
  else {
    uni.showToast({
      title: '已报名',
      icon: 'none',
    })
  }
}

/**
 * 立即过去
 */
const onNavigate = (address: string) => {
  uni.getLocation({
    type: 'wgs84',
    success(result) {
      const { latitude, longitude } = result
      openTXMapRoutePlan(address, { latitude, longitude })
    },
  })
}

onLoad((options) => {
  if (!options)
    return
  activityId.value = options.activityId
  getActivityDetail()
})
</script>

<template>
  <view class="activity-container">
    <hope-nav-bar is-back-icon :title="PageTitle.ACTIVITY_DETAIL" />
    <view v-if="activityDetail" class="activity-scroll-container">
      <scroll-view scroll-y class="activity-scroll-content">
        <view class="activity-top">
          <image :src="activityDetail?.imgUrl" mode="aspectFill" class="activity-img" />
          <uni-section
            :title="activityDetail?.activityName" :sub-title="activityDetail.brief" type="line"
            title-font-size="36rpx"
          />
          <view class="activity-recruitment-info">
            <text class="activity-recruitment-status">
              {{ activityStatus[activityDetail.status] }}
            </text>
            <text class="activity-recruitment-requirement">
              招募人数:{{ activityDetail?.requireVolunteers }}
            </text>
            <text class="activity-recruitment-count">
              已招募人数: {{ activityDetail.registeredVolunteers }}
            </text>
          </view>
        </view>

        <view class="activity-info-list">
          <uni-section
            :title-font-size="TitleFontSize" type="line" title="活动时间"
            :sub-title="`${activityDetail.startTime}-${activityDetail.endTime}`" :sub-title-font-size="SubFontSize"
          />`

          <!-- 地图选择 -->
          <view class="activity-info-item">
            <uni-section
              :title-font-size="TitleFontSize" type="line" title="活动地址" :sub-title="activityDetail.address"
              :sub-title-font-size="SubFontSize"
            />
            <image
              class="address" :src="IconPath.POSITION" mode="scaleToFill"
              @click="() => openTXMapRoutePlan(activityDetail?.address)"
            />
          </view>

          <view v-for="item in activityInfoList?.slice(2)" :key="item.title" class="activity-info-item">
            <uni-section
              type="line" :sub-title-font-size="SubFontSize" :title-font-size="TitleFontSize"
              :title="item.title" :sub-title="item.subText"
            />
          </view>

          <view class="activity-info-item activity-info-item-desc">
            <uni-section title="活动详情" type="line" :sub-title-font-size="SubFontSize" :title-font-size="TitleFontSize" />
            <mpHtml :content="activityDetail.activityDescHtml" />
          </view>
        </view>
      </scroll-view>
    </view>

    <skeleton v-else />

    <view class="activity-button">
      <view class="activity-button-item" @click="() => onSign(activityId)">
        <hope-button title="我要报名" />
      </view>
      <view class="activity-button-item" @click="() => onNavigate(activityDetail!.address)">
        <hope-button title="立即过去" :icon-path="IconPath.POSITION_LIGHT" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.activity {
  &-img {
    width: 100%;
    height: 400rpx;
    border-radius: $border-radius-base;
  }

  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  &-scroll {
    background-color: $color-white;

    &-container {
      flex: 1;
      overflow: hidden;
      background-color: $color-white;
    }

    &-content {
      height: 100%;
    }
  }

  &-top {
    border: 20rpx solid $bg-gray;
    padding-bottom: $padding-base;

  }

  &-recruitment {
    &-info {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding-inline: $padding-base;
      justify-content: flex-end;
    }

    &-status {
      border: 1px solid $color-primary;
      padding: 4rpx 6rpx;
      font-size: $font-size-sm;
      color: $color-primary;
    }

    &-requirement {
      font-size: $font-size-sm;
      color: $uni-text-color-placeholder;
    }

    &-count {
      font-size: $font-size-sm;
      color: $uni-text-color-placeholder;
    }
  }

  &-info {
    display: flex;

    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-desc {
        align-items: start;
        flex-direction: column;
      }
    }

    &-list {
      display: flex;
      flex-direction: column;
      padding: $padding-base;

      .address {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }

  &-button {
    display: flex;
    gap: 30rpx;
    background-color: $color-white;
    padding: $padding-base;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

    &-item {
      flex: 1;

    }
  }
}
</style>
